package com.back.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.back.model.Resource;
import com.back.model.ResourceDetail;
import com.back.model.ResourcePage;
import com.back.model.SearchCondition;
import com.back.utils.Log;

@RestController
@RequestMapping("/resource")
public class ResourceController {

    @PostMapping("/getResourcePage")
    public ResourcePage getResourcePage(@RequestBody SearchCondition searchCondition) {
        Log.info(getClass(), "SearchCondition接收的内容 pageIndex {} ,searchCondition 搜索 {}, 内容{}, 时间{}, 分类{}, 排序{}",
                searchCondition.getPageIndex(),
                searchCondition.getIsSearch(),
                searchCondition.getQuery(),
                searchCondition.getFilters().getTime(),
                searchCondition.getFilters().getCategory(),
                searchCondition.getFilters().getSort());

        Long pageIndex = searchCondition.getPageIndex();
        Long totalPages = 4L;
        Long total = 100L;
        ResourcePage resourcePage = new ResourcePage();
        resourcePage.setTotal(total);
        resourcePage.setPageIndex(pageIndex++);
        resourcePage.setTotalPages(totalPages);
        List<Resource> resources = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            Resource resource = new Resource();
            resource.setId((long) i);
            resource.setTitle("title" + i);
            resource.setType(i + "type");
            resources.add(resource);
        }
        resourcePage.setResults(resources.toArray(new Resource[0]));
        return resourcePage;
    }

    @PostMapping("/getResourceDetail")
    public ResourceDetail getResourceDetail(@RequestBody Long id) {
        Log.info(getClass(), "getResourceDetail接收的资源id {}", id);
        ResourceDetail resource = new ResourceDetail();
        resource.setId(id);
        resource.setTitle("标题" + id);
        resource.setName("example-" + id + ".zip");
        resource.setSize("15.6MB");
        resource.setUploadTime("2025-06-09 12:30");
        resource.setDescription(
                "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff<template>\r\n" + //
                                        "  <div class=\"background\" :style=\"{ backgroundImage: `url(${bg6Url})` }\">\r\n" + //
                                        "    <div class=\"back-button\" @click=\"goBack\">\r\n" + //
                                        "      <img src=\"@/assets/images/ic/arrow_back.png\" alt=\"返回\" />\r\n" + //
                                        "    </div>\r\n" + //
                                        "    <div class=\"title-flex\">\r\n" + //
                                        "      <h1>基本信息</h1>\r\n" + //
                                        "    </div>\r\n" + //
                                        "\r\n" + //
                                        "    <div class=\"resource-detail1\">\r\n" + //
                                        "      <p class=\"item\"><strong>标题：</strong>{{ resource.title }}</p>\r\n" + //
                                        "      <p class=\"item\"><strong>资源名：</strong>{{ resource.name }}</p>\r\n" + //
                                        "      <p class=\"item\"><strong>大小：</strong>{{ size }}</p>\r\n" + //
                                        "      <p class=\"item\"><strong>上传时间：</strong>{{ resource.uploadTime }}</p>\r\n" + //
                                        "      <p class=\"item\"><strong>评分：</strong>{{ resource.rating }}</p>\r\n" + //
                                        "      <p class=\"item\"><strong>下载次数：</strong>{{ resource.downloads }}</p>\r\n" + //
                                        "    </div>\r\n" + //
                                        "    <div class=\"title-flex\">\r\n" + //
                                        "      <h1>介绍</h1>\r\n" + //
                                        "    </div>\r\n" + //
                                        "\r\n" + //
                                        "    <div class=\"resource-detail2\">\r\n" + //
                                        "      <p class=\"item\">{{ resource.description }}</p>\r\n" + //
                                        "    </div>\r\n" + //
                                        "\r\n" + //
                                        "    <!-- 操作按钮区域 -->\r\n" + //
                                        "    <div class=\"actions\">\r\n" + //
                                        "      <button class=\"action-button\">\r\n" + //
                                        "        <img src=\"@/assets/images/ic/star.png\" alt=\"下载\" class=\"icon\" /> 收藏\r\n" + //
                                        "      </button>\r\n" + //
                                        "      <button class=\"action-button\">\r\n" + //
                                        "        <img src=\"@/assets/images/ic/download.png\" alt=\"下载\" class=\"icon\" /> 下载\r\n" + //
                                        "      </button>\r\n" + //
                                        "      <button class=\"action-button\">\r\n" + //
                                        "        <img src=\"@/assets/images/ic/leaderboard.png\" alt=\"下载\" class=\"icon\" /> 打分\r\n" + //
                                        "      </button>\r\n" + //
                                        "    </div>\r\n" + //
                                        "  </div>\r\n" + //
                                        "\r\n" + //
                                        "  <div class=\"background\" :style=\"{ backgroundImage: `url(${bg5Url})` }\">\r\n" + //
                                        "    <div class=\"title-flex\">\r\n" + //
                                        "      <h1>评论</h1>\r\n" + //
                                        "    </div>\r\n" + //
                                        "\r\n" + //
                                        "    <!-- 评论列表容器 -->\r\n" + //
                                        "    <div class=\"comment-container\" @scroll.passive=\"handleScroll\" ref=\"commentBox\">\r\n" + //
                                        "      <div class=\"comment-item\" v-for=\"(comment, index) in comments\" :key=\"index\">\r\n" + //
                                        "        <div class=\"comment-top\">\r\n" + //
                                        "          <span class=\"comment-time\">{{ comment.time }}</span>\r\n" + //
                                        "        </div>\r\n" + //
                                        "        <div class=\"comment-main\">\r\n" + //
                                        "          <div class=\"comment-user-text\">\r\n" + //
                                        "            <span class=\"comment-user\">{{ comment.userName }}</span>\r\n" + //
                                        "            <span class=\"comment-text\">{{ comment.content }}</span>\r\n" + //
                                        "          </div>\r\n" + //
                                        "          <div class=\"comment-like\">\r\n" + //
                                        "            <img src=\"@/assets/images/ic/praise.png\" alt=\"点赞\" class=\"like-icon\" @click=\"handleLike(comment)\" />\r\n" + //
                                        "            <span class=\"like-count\">{{ comment.praise }}</span>\r\n" + //
                                        "          </div>\r\n" + //
                                        "        </div>\r\n" + //
                                        "      </div>\r\n" + //
                                        "      <div v-if=\"loading\" class=\"loading\">加载中...</div>\r\n" + //
                                        "      <div v-if=\"noMore\" class=\"end\">没有更多评论了</div>\r\n" + //
                                        "    </div>\r\n" + //
                                        "\r\n" + //
                                        "    <!-- 评论输入框 -->\r\n" + //
                                        "    <div class=\"comment-input\">\r\n" + //
                                        "      <input v-model=\"newComment\" placeholder=\"说点什么...\" />\r\n" + //
                                        "      <button @click=\"submitComment()\">发送</button>\r\n" + //
                                        "    </div>\r\n" + //
                                        "  </div>\r\n" + //
                                        "\r\n" + //
                                        "</template>\r\n" + //
                                        "<script setup lang=\"ts\">\r\n" + //
                                        "\r\n" + //
                                        "import { useRoute } from 'vue-router'\r\n" + //
                                        "import bg6Url from '@/assets/images/background/detail_bg1.png'\r\n" + //
                                        "import bg5Url from '@/assets/images/background/home_bg5.png'\r\n" + //
                                        "\r\n" + //
                                        "import { ref, onMounted, computed } from 'vue'\r\n" + //
                                        "import { ResourceDetail } from '@/model/ResourceModels'\r\n" + //
                                        "\r\n" + //
                                        "const route = useRoute()\r\n" + //
                                        "const id = Number(route.params.id) as number\r\n" + //
                                        "\r\n" + //
                                        "import { useRouter } from 'vue-router'\r\n" + //
                                        "import { fetchResourceDetail } from '@/service/ResourceService'\r\n" + //
                                        "import { CommentItem, CommentLoadCondition } from '@/model/CommentModel'\r\n" + //
                                        "import { handleLikeToBack, loadMoreComments, submitCommentToBack } from '@/service/CommentService'\r\n" + //
                                        "import { formatFileSize } from '@/service/Utils'\r\n" + //
                                        "const router = useRouter()\r\n" + //
                                        "\r\n" + //
                                        "function goBack() {\r\n" + //
                                        "  router.back()\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        "\r\n" + //
                                        "const resource = ref<ResourceDetail>({\r\n" + //
                                        "  id: id,\r\n" + //
                                        "  title: '',\r\n" + //
                                        "  name: '',\r\n" + //
                                        "  size: 0,\r\n" + //
                                        "  uploadTime: '',\r\n" + //
                                        "  description: '',\r\n" + //
                                        "  rating: 0,\r\n" + //
                                        "  downloads: 0,\r\n" + //
                                        "})\r\n" + //
                                        "const size = computed(() => formatFileSize(resource.value.size))\r\n" + //
                                        "\r\n" + //
                                        "const commentBox = ref<HTMLElement | null>(null)\r\n" + //
                                        "const comments = ref<CommentItem[]>([])  // 现在类型就明确了！\r\n" + //
                                        "const page = ref(1)\r\n" + //
                                        "const loading = ref(false)\r\n" + //
                                        "const noMore = ref(false)\r\n" + //
                                        "const newComment = ref('')\r\n" + //
                                        "\r\n" + //
                                        "function handleScroll() {\r\n" + //
                                        "  const el = commentBox.value\r\n" + //
                                        "  if (!el) return\r\n" + //
                                        "\r\n" + //
                                        "  const scrollBottom = el.scrollTop + el.clientHeight\r\n" + //
                                        "  if (scrollBottom >= el.scrollHeight - 10) {\r\n" + //
                                        "    page.value++\r\n" + //
                                        "    const commentLoadCondition : CommentLoadCondition = { resourceId: id, pageIndex: page.value }\r\n" + //
                                        "    loadMoreComments( comments, commentLoadCondition, page, loading, noMore)\r\n" + //
                                        "  }\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        "// 点赞处理函数\r\n" + //
                                        "function handleLike(comment: CommentItem) {\r\n" + //
                                        "  // 这里只是简单演示，实际应调用后端接口\r\n" + //
                                        "  comment.praise = (comment.praise || 0) + 1\r\n" + //
                                        "  handleLikeToBack(id, comment)\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        "\r\n" + //
                                        "function submitComment() {\r\n" + //
                                        "  if (newComment.value.trim() === '') return\r\n" + //
                                        "\r\n" + //
                                        "  comments.value.unshift({\r\n" + //
                                        "    userName: '我',\r\n" + //
                                        "    content: newComment.value.trim(),\r\n" + //
                                        "    time: new Date().toLocaleString(),\r\n" + //
                                        "    praise: 0\r\n" + //
                                        "  })\r\n" + //
                                        "\r\n" + //
                                        "  submitCommentToBack(id, newComment.value)\r\n" + //
                                        "  newComment.value = ''\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        "\r\n" + //
                                        "\r\n" + //
                                        "onMounted(() => {\r\n" + //
                                        "  window.scrollTo(0, 0) // 强制页面跳到顶部\r\n" + //
                                        "  const commentLoadCondition : CommentLoadCondition = { resourceId: id, pageIndex: 1 }\r\n" + //
                                        "  loadMoreComments( comments, commentLoadCondition, page, loading, noMore)\r\n" + //
                                        "  fetchResourceDetail(resource)\r\n" + //
                                        "})\r\n" + //
                                        "\r\n" + //
                                        "</script>\r\n" + //
                                        "\r\n" + //
                                        "<style scoped>\r\n" + //
                                        ".back-button {\r\n" + //
                                        "  margin-top: 40px;\r\n" + //
                                        "  position: fixed;\r\n" + //
                                        "  top: 20px;\r\n" + //
                                        "  left: 20px;\r\n" + //
                                        "  width: 48px;\r\n" + //
                                        "  height: 48px;\r\n" + //
                                        "  cursor: pointer;\r\n" + //
                                        "  z-index: 999;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".back-button img {\r\n" + //
                                        "  width: 100%;\r\n" + //
                                        "  height: 100%;\r\n" + //
                                        "  object-fit: contain;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        "\r\n" + //
                                        ".title-flex h1 {\r\n" + //
                                        "  font-size: 36px;\r\n" + //
                                        "  font-weight: bold;\r\n" + //
                                        "  margin: 0;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".resource-detail1 {\r\n" + //
                                        "  max-width: 40%;\r\n" + //
                                        "  margin: 0 auto;\r\n" + //
                                        "  background-color: rgba(255, 255, 255, 0.1);\r\n" + //
                                        "  /* 半透明背景 */\r\n" + //
                                        "  padding: 20px 30px;\r\n" + //
                                        "  border-radius: 12px;\r\n" + //
                                        "  color: #333;\r\n" + //
                                        "  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".resource-detail2 {\r\n" + //
                                        "  max-width: 60%;\r\n" + //
                                        "  margin: 0 auto;\r\n" + //
                                        "  background-color: rgba(255, 255, 255, 0.1);\r\n" + //
                                        "  padding: 20px 30px;\r\n" + //
                                        "  border-radius: 12px;\r\n" + //
                                        "  color: #333;\r\n" + //
                                        "  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\r\n" + //
                                        "\r\n" + //
                                        "  /* 关键：自动换行 */\r\n" + //
                                        "  word-wrap: break-word;\r\n" + //
                                        "  word-break: break-word;\r\n" + //
                                        "  white-space: normal;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        "\r\n" + //
                                        ".item {\r\n" + //
                                        "  margin: 10px 0;\r\n" + //
                                        "  font-size: 18px;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".actions {\r\n" + //
                                        "  margin: 30px auto;\r\n" + //
                                        "  display: flex;\r\n" + //
                                        "  justify-content: center;\r\n" + //
                                        "  /* 水平居中所有按钮 */\r\n" + //
                                        "  gap: 20px;\r\n" + //
                                        "  /* 按钮之间间距 */\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        "\r\n" + //
                                        ".action-button {\r\n" + //
                                        "  background: rgba(255, 255, 255, 0.3);\r\n" + //
                                        "  border: none;\r\n" + //
                                        "  border-radius: 8px;\r\n" + //
                                        "  padding: 10px 20px;\r\n" + //
                                        "  margin: 0 10px;\r\n" + //
                                        "  font-size: 16px;\r\n" + //
                                        "  cursor: pointer;\r\n" + //
                                        "  transition: background-color 0.2s ease;\r\n" + //
                                        "  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n" + //
                                        "\r\n" + //
                                        "  /* 垂直排列图标和文字 */\r\n" + //
                                        "  display: flex;\r\n" + //
                                        "  flex-direction: column;\r\n" + //
                                        "  align-items: center;\r\n" + //
                                        "  justify-content: center;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        "\r\n" + //
                                        ".action-button:hover {\r\n" + //
                                        "  background-color: #f0f0f0;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".icon {\r\n" + //
                                        "  width: 48px;\r\n" + //
                                        "  height: 48px;\r\n" + //
                                        "  margin-bottom: 6px;\r\n" + //
                                        "  /* 图标和文字之间的间距 */\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-container {\r\n" + //
                                        "  max-height: 400px;\r\n" + //
                                        "  overflow-y: auto;\r\n" + //
                                        "  background: rgba(255, 255, 255, 0.1);\r\n" + //
                                        "  margin: 0 auto 20px;\r\n" + //
                                        "  padding: 20px;\r\n" + //
                                        "  border-radius: 8px;\r\n" + //
                                        "  width: 70%;\r\n" + //
                                        "  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-item {\r\n" + //
                                        "  padding: 10px 15px;\r\n" + //
                                        "  border-bottom: 1px solid #ddd;\r\n" + //
                                        "  font-size: 16px;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-top {\r\n" + //
                                        "  margin-bottom: 4px;\r\n" + //
                                        "  color: #888;\r\n" + //
                                        "  font-size: 12px;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-main {\r\n" + //
                                        "  display: flex;\r\n" + //
                                        "  justify-content: space-between;\r\n" + //
                                        "  align-items: center;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-user-text {\r\n" + //
                                        "  display: flex;\r\n" + //
                                        "  gap: 10px;\r\n" + //
                                        "  align-items: center;\r\n" + //
                                        "  flex-wrap: wrap;\r\n" + //
                                        "  /* 防止用户名太长换行 */\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-user {\r\n" + //
                                        "  font-weight: bold;\r\n" + //
                                        "  color: #333;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-text {\r\n" + //
                                        "  color: #555;\r\n" + //
                                        "  max-width: 70vw;\r\n" + //
                                        "  /* 限制评论文本最大宽度 */\r\n" + //
                                        "  word-break: break-word;\r\n" + //
                                        "  /* 超长单词自动换行 */\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-like {\r\n" + //
                                        "  display: flex;\r\n" + //
                                        "  align-items: center;\r\n" + //
                                        "  gap: 5px;\r\n" + //
                                        "  cursor: pointer;\r\n" + //
                                        "  user-select: none;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".like-icon {\r\n" + //
                                        "  width: 18px;\r\n" + //
                                        "  height: 18px;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        "\r\n" + //
                                        ".comment-input {\r\n" + //
                                        "  display: flex;\r\n" + //
                                        "  justify-content: center;\r\n" + //
                                        "  gap: 10px;\r\n" + //
                                        "  margin-bottom: 40px;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-input input {\r\n" + //
                                        "  width: 60%;\r\n" + //
                                        "  padding: 8px 12px;\r\n" + //
                                        "  border: 1px solid #aaa;\r\n" + //
                                        "  border-radius: 6px;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".comment-input button {\r\n" + //
                                        "  padding: 8px 16px;\r\n" + //
                                        "  background-color: #4caf50;\r\n" + //
                                        "  border: none;\r\n" + //
                                        "  border-radius: 6px;\r\n" + //
                                        "  color: white;\r\n" + //
                                        "  cursor: pointer;\r\n" + //
                                        "}\r\n" + //
                                        "\r\n" + //
                                        ".loading,\r\n" + //
                                        ".end {\r\n" + //
                                        "  text-align: center;\r\n" + //
                                        "  margin-top: 10px;\r\n" + //
                                        "  color: #888;\r\n" + //
                                        "}\r\n" + //
                                        "</style>");
        resource.setRating(4.2);
        resource.setDownloads(1432);
        return resource;
    }

}
